<template>
  <div class="archives-page">
    <div class="page-header">
      <h1>文章管理</h1>
      <div class="actions">
        <el-button type="primary">新建文章</el-button>
      </div>
    </div>
    
    <div class="page-content">
      <el-table :data="articles" style="width: 100%">
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="category" label="分类" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="status" label="状态" />
        <el-table-column label="操作" width="200">
          <template #default>
            <el-button size="small" type="primary">编辑</el-button>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <div class="navigation">
      <router-link to="/">
        <el-button>返回工作台</el-button>
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const articles = ref([
  {
    title: '示例文章1',
    category: '技术分享',
    createTime: '2024-01-01',
    status: '已发布'
  },
  {
    title: '示例文章2',
    category: '产品介绍',
    createTime: '2024-01-02',
    status: '草稿'
  }
])

onMounted(() => {
  console.log('文章管理页面已加载')
})
</script>

<style scoped>
.archives-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-content {
  margin-bottom: 20px;
}

.navigation {
  text-align: center;
  padding: 20px 0;
}
</style>